<template>
    <div class="container">
        <!-- top -->
        <div>
            <div>
                <div>
                    <div>设备信息管理</div>
                    <div>
                        <L_one />
                    </div>
                </div>
                <div>
                    <div>工作面信息管理</div>
                    <div>
                        <L_two />
                    </div>
                </div>
            </div>
            <div>
                <div class="two1">
                    <div>
                        <div>刮板输送机工作状态演示</div>
                    </div>
                    <div>
                        <C_one />
                    </div>
                </div>
                <div class="two2">
                    <div>刮板机实时曲线</div>
                    <div>
                        <C_two />
                    </div>
                </div>
            </div>
            <div>
                <div>
                    <div>报警信息</div>
                    <div>
                        <R_one />
                    </div>
                </div>
                <div>
                    <div>传感器实时数据</div>
                    <div>
                        <R_two />
                    </div>
                </div>
            </div>
        </div>
        <!-- bottom -->
        <div>
            <div>
                <div>刮板机历史轨迹</div>
                <div>
                    <B_one />
                </div>
            </div>
            <div>
                <div>电液控制系统通讯状态</div>

                <div>
                    <B_two />
                </div>

                <div class="Switch">
                    发送状态
                    <el-switch style="margin-left: 10px;" v-model="value" active-color="#40F66B" inactive-color="red">
                    </el-switch>

                </div>
            </div>
        </div>
    </div>
</template>
<script>
import L_one from './L_one.vue'
import L_two from './L_two.vue'
import C_one from './C_one.vue'
import C_two from './C_two.vue'
import B_one from './B_one.vue'
import B_two from './B_two.vue'
import R_one from './R_one.vue'
import R_two from './R_two.vue'
export default {
    components: {
        L_one,
        L_two,
        C_one,
        C_two,
        B_one,
        B_two,
        R_one,
        R_two,
    },
    data() {
        return {
            value: true
        }
    },
    mounted() {
    },
    methods: {
    },
}
</script>
<style lang="less" scoped>
@padding: 5px;

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    padding: 0 40px;
    // background-image: url('../../../../assets/Scraper/bac.png');
    // background-size: 100% 100%;

    >div:nth-child(1) {
        width: 100%;
        height: calc(100% / 3 * 2 + 12px);
        // border: 1px solid red;
        display: flex;
        align-items: center;
        justify-content: space-between;

        >div:nth-child(2n-1) {
            width: 29%;
            height: 100%;
            display: flex;
            flex-wrap: wrap;
            align-content: space-between;

            >div {
                width: 100%;
                height: calc(100% / 2 - 2px);
                display: flex;
                flex-wrap: wrap;
                align-content: space-between;
                // border: 1px solid slateblue;

                >div:nth-child(1) {
                    width: 100%;
                    height: 14%;
                    background-image: url('../../../../assets/Scraper/容器 10@1x.png');
                    background-size: 100% 100%;

                    display: flex;
                    align-items: center;
                    padding: 0 0 0 5%;
                    letter-spacing: 0px;
                    font-family: 思源黑体;
                    font-weight: bold;
                    text-shadow: 0px 0px 15px rgba(27, 126, 242, 0.91);
                    color: rgba(255, 255, 255, 0.87);
                }

                >div:nth-child(2) {
                    width: 100%;
                    height: calc(100% - 14% - 5px);
                    background-image: url('../../../../assets/Scraper/弹窗2@1x (2).png');
                    background-size: 100% 100%;
                    padding: @padding;
                }

            }
        }

        >div:nth-child(2n) {
            width: calc(100% - 29% * 2 - 20px);
            height: 100%;
            display: flex;
            flex-wrap: wrap;
            align-content: space-between;


            .two1 {
                width: 100%;
                height: calc(100% / 2 - 2px);
                display: flex;
                flex-wrap: wrap;
                align-content: space-between;


                >div:nth-child(1) {
                    width: 100%;
                    height: 16%;
                    color: white;
                    display: flex;
                    align-items: center;
                    padding: 0 0 0 5%;
                    background-image: url('../../../../assets/Scraper/组 204@1x.png');
                    background-size: 324.81px 18%;
                    background-repeat: no-repeat;
                    background-position: center;
                    position: relative;

                    // border: 1px solid red;

                    >div:nth-child(1) {
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        letter-spacing: 0px;
                        font-family: 思源黑体;
                        font-weight: bold;
                        text-shadow: 0px 0px 15px rgba(27, 126, 242, 0.91);
                        color: rgba(255, 255, 255, 0.87);

                    }


                }

                >div:nth-child(2) {
                    width: 100%;
                    height: calc(100% - 15% - 10px);
                    background-image: url('../../../../assets/Scraper/弹窗2@1x (2).png');
                    background-size: 100% 100%;
                    padding: @padding;

                }
            }

            .two2 {
                width: 100%;
                height: calc(100% / 2 - 2px);
                display: flex;
                flex-wrap: wrap;
                align-content: space-between;
                // border: 1px solid red;

                >div:nth-child(1) {
                    width: 100%;
                    height: 16%;
                    background-image: url('../../../../assets/Scraper/二级标题栏@1x.png');
                    background-size: 100% 100%;
                    letter-spacing: 0px;
                    font-family: 思源黑体;
                    font-weight: bold;
                    text-shadow: 0px 0px 15px rgba(27, 126, 242, 0.91);
                    color: rgba(255, 255, 255, 0.87);
                    display: flex;
                    align-items: center;
                    padding: 0 0 0 5%;
                }

                >div:nth-child(2) {
                    width: 100%;
                    height: calc(100% - 15% - 10px);
                    background-image: url('../../../../assets/Scraper/2@1x (2-1).png');
                    background-size: 100% 100%;
                    padding: @padding;
                }

            }

        }
    }

    >div:nth-child(2) {
        width: 100%;
        height: calc(100% / 3 * 1 - 20px);
        display: flex;
        align-items: center;
        justify-content: space-between;

        // border: 1px solid red;

        >div {
            width: 49.7%;
            height: 100%;
            // border: 1px solid seagreen;
            display: flex;
            flex-wrap: wrap;
            align-content: space-between;

            >div:nth-child(1) {
                width: 100%;
                height: 14%;
                background-image: url('../../../../assets/Scraper/B_B.png');
                background-size: 100% 100%;
                letter-spacing: 0px;
                font-family: 思源黑体;
                font-weight: bold;
                text-shadow: 0px 0px 15px rgba(27, 126, 242, 0.91);
                color: rgba(255, 255, 255, 0.87);
                display: flex;
                align-items: center;
                padding: 0 0 0 3%;
            }

            >div:nth-child(2) {
                width: 100%;
                height: calc(100% - 14% - 10px);
                background-image: url('../../../../assets/Scraper/弹窗2@1x (2).png');
                background-size: 100% 100%;
                padding: @padding;
                // border: 1px solid red;
            }
        }

        >div:nth-child(2) {
            // border: 1px solid red;
            position: relative;

            .Switch {
                color: #63F5E1;
                position: absolute;
                top: 3%;
                left: 27%;
                font-size: 14px;
                font-weight: 900;
            }
        }
    }
}
</style>
